<!--
 * @Description: 请输入....
 * @Author: Gavin
 * @Date: 2022-01-11 13:18:30
 * @LastEditTime: 2022-01-21 15:00:21
 * @LastEditors: Gavin
-->
<!DOCTYPE html>
<html>

    <head>
        <title>年会抽奖</title>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
        <style>
            .liveAlertPlaceholder {
                position: fixed;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                top: 0;
                left: 0;
                z-index: 1000;
                display: flex;
                align-items: center;
                justify-content: center;
                display: none;
            }

            .form-box {
                width: 600px;
                background: #fff;
                border-radius: 10px;
                padding: 30px;
            }

            .form-box-title {
                text-align: center;
                font-weight: bold;
                font-size: 30px;
            }

            .form-box-list {
                padding: 10px 0;
            }

            .form-box__item {
                display: inline-block;
                width: 80px;
            }

            .footer {
                display: flex;
                text-align: center;
                align-items: center;
                width: 100%;
                justify-content: center;
                margin-top: 30px;
            }

            .btn {
                width: 100px;
                padding: 5px 10px;
                background: #66b1ff;
                border-radius: 5px;
                color: #fff;
                border: 1px solid #66b1ff;
                cursor: pointer;
            }

            .cancel {
                background: #fff;
                color: #000;
                margin-left: 10px;
                border: 1px solid #dcdfe6;
            }
        </style>

    </head>

    <body id="body">
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>-->
    <script src="./lib/xlsx.full.min.js"></script>
    <script src="./lib/three.min.js"></script>
    <script src="./lib/tween.min.js"></script>
    <script src="./lib/TrackballControls.js"></script>
    <script src="./lib/CSS3DRenderer.js"></script>
    <script src="./lib/ajax.js"></script>


    <div class="canvas-box">
        <canvas id="canvas">你的浏览器不支持canvas</canvas>
    </div>

    <div class="bg-box" id="bgVideo"></div>

    <div class="music">
        <audio id="music" class="music-item" loop></audio>
        <div id="musicBox" class="music-box" title="播放/暂停背景音乐"></div>
    </div>

    <div id="prizeBar"></div>

    <div id="container"></div>

    <div id="menu">
        <button id="enter">进入抽奖</button>
        <div id="lotteryBar" class="none">
            <button id="lottery">抽奖</button>
            <!-- <button id="reLottery">重新抽奖</button>-->
            <!-- <button id="result">返回首页</button> -->
            <!-- <button id="back">返回首页</button> -->
            <!-- <button id="awards">颁奖模式</button>-->
            <button id="reset" class="margin-l-40">重置</button>
            <button id="add" class="margin-l-40">神秘大奖</button>
            <button id="start" class="margin-l-40">年会抽奖</button>
            <button id="save" class="margin-l-40">导出结果</button>
            <button id="test" class="margin-l-40">配置奖品个数</button>
        </div>
    </div>

    <div class="qipao-container"></div>
    <div class="liveAlertPlaceholder">
        <div class="form-box">
            <div class="form-box-title">奖品个数设置</div>
            <div id="form-box-1">
                <div class="form-box-list">
                    <span class="form-box__item">特等奖</span>
                    <input id="inp-0"/>
                </div>
                <div class="form-box-list">
                    <span class="form-box__item">一等奖</span>
                    <input id="inp-1"/>
                </div>
                <div class="form-box-list">
                    <span class="form-box__item">二等奖</span>
                    <input id="inp-2"/>
                </div>
                <div class="form-box-list">
                    <span class="form-box__item">三等奖</span>
                    <input id="inp-3"/>
                </div>
            </div>
            <div id="form-box-2">
                <div class="form-box-list">
                    <span class="form-box__item">神秘大奖</span>
                    <input id="inp-4"/>
                </div>
            </div>
            <div class="footer">
                <div onclick="submit()" class="btn">确定</div>
                <div onclick="cancel()" class="btn cancel">取消</div>
            </div>
        </div>
    </div>
    <script>
        function submit() {
            let int0 = document.getElementById('inp-0').value
            let int1 = document.getElementById('inp-1').value
            let int2 = document.getElementById('inp-2').value
            let int3 = document.getElementById('inp-3').value
            let int4 = document.getElementById('inp-4').value
            let box = document.getElementsByClassName('liveAlertPlaceholder')
            if (int0 && int1 && int2 && int3 && int4) {
                let dataList = [int0, int1, int2, int3]
                localStorage.setItem('prizeLocal', JSON.stringify(dataList))
                let dataListAdd = [int4]
                localStorage.setItem('prizeLocalAdd', JSON.stringify(dataListAdd))
                box[0].style.display = 'none'
                window.location.reload()
            } else {
                alert('所有奖品都需要设置个数')
            }
        }

        function cancel() {
            let box = document.getElementsByClassName('liveAlertPlaceholder')
            box[0].style.display = 'none'
        }

        const getUrlParams = (paramName) => {
            // 获取当前页面的 URL
            const url = new URL(window.location.href);
            const searchParams = url.searchParams;

            // 获取指定参数的值
            const paramValue = searchParams.get(paramName);
            return paramValue
        }

        const pageType = getUrlParams('type')
        if (pageType == 'add') {
            document.getElementById('start').style.display = 'inline-block'
            document.getElementById('add').style.display = 'none'
        } else {
            document.getElementById('start').style.display = 'none'
            document.getElementById('add').style.display = 'inline-block'
        }
    </script>

    </body>

</html>
